<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
  import { uploadImageApi } from '@/apis/user'
  import { useConsultStore, type ConsultInfo } from '@/stores/consult'
  import type { UploadImage } from '@/types/user'
  import { computed, ref, watch } from 'vue'

  const pageParams = defineProps<{
    type: string
    depId: string
    illnessType: string
  }>()
  console.log('分步表单搜集的参数', pageParams)
  const defaultIllnessInfo: ConsultInfo = {
    illnessDesc: '',
    illnessTime: 1,
    consultFlag: 0,
    pictures: [],
  }
  // 图文问诊表单信息
  const illnessInfo = ref<ConsultInfo>({ ...defaultIllnessInfo })
  const store = useConsultStore()

  watch(illnessInfo.value, () => {
    store.illnessInfo = illnessInfo.value
  })
  // 如果持久化有病情信息，则弹窗提示是否恢复表单
  if (store.illnessInfo.illnessDesc) {
    // 弹窗
    uni.showModal({
      title: '温馨提示',
      content: '是否恢复之前填写的病情信息？',
      confirmColor: '#16C2A3',
      success: (res) => {
        // 点击确定，把持久化的数据赋值给表单回显
        if (res.confirm) {
          illnessInfo.value = store.illnessInfo
        }
        // 点击取消，重置 store 存储的数据
        if (res.cancel) {
          store.illnessInfo = { ...defaultIllnessInfo }
        }
      },
    })
  }

  // 患病时长
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]
  // 是否就诊过
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]
  // 上传图片，选择文件后触发
  const onSelect = async (event: UniHelper.UniFilePickerOnSelectEvent) => {
    // 文件的临时(沙箱)路径
    // console.log(event.tempFilePaths[0])
    if (event.tempFilePaths[0]) {
      // 调用上传文件的接口
      const res = await uploadImageApi(event.tempFilePaths[0])
      // 把服务器返回的图片信息追加到表单中
      illnessInfo.value.pictures.push(res)
    }
  }
  // 删除文件后触发
  const onDelete = (event: UniHelper.UniFilePickerOnDeleteEvent) => {
    // 根据索引删除指定图片
    illnessInfo.value.pictures.splice(event.index, 1)
  }

  // 通过 computed + map 自动映射成 uni-file-picker 的 value 数据结构
  const imageList = computed(() => {
    // map 可以指定返回值类型，指定类型后有字段提示
    return illnessInfo.value.pictures.map<UniHelper.UniFilePickerValue>((item) => {
      return {
        url: item.url,
        name: item.id,
        extname: item.url.split('.').pop() || 'jpg',
      }
    })
  })

  // 图文问诊，点击下一步
  const nextStep = () => {
    // 把页面参数也持久化到 store 中
    if (pageParams) {
      store.type = pageParams.type
      store.depId = pageParams.depId
      store.illnessType = pageParams.illnessType
    }
    // 跳转到选择患者页，选择患者页可以【复用】之前的档案列表页，通过传递页面参数区别
    uni.navigateTo({ url: '/subpkg_archive/list/index?type=consult' })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            v-model="illnessInfo.illnessDesc"
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="item in illnessTimes"
            :key="item.text"
            class="tag"
            :class="{ active: illnessInfo.illnessTime == item.value }"
            @click="illnessInfo.illnessTime = item.value"
            >{{ item.text }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="item in consultFlags"
            :key="item.text"
            :class="{ active: illnessInfo.consultFlag == item.value }"
            @click="illnessInfo.consultFlag = item.value"
            class="tag"
            >{{ item.text }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          :value="imageList"
          :auto-upload="false"
          @select="onSelect"
          @delete="onDelete"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        @click="nextStep()"
        :disabled="illnessInfo.illnessDesc.trim() === ''"
        class="uni-button"
      >
        下一步
      </button>
      {{ illnessInfo }}
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
